body {
	width: 100%;
	height: 100%;
	background-color: #57b1db;
	color: #fff;
	padding: 20px;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		p {
			margin-bottom: 8px;
		}

		strong {
			font-size: 24px;
		}

		.headbox {
			i {
				font-size: 24px;
				&:nth-child(1) {
					padding-right: 20px;
				}
			}
		}
	}
	.main {
		.kilometer {
			text-align: center;
			margin: 80px 0;

			span {
				font-size: 80px;
			}
		}

		.gps {
			border-bottom: 1px solid #fff;
			display: flex;
			justify-content: space-between;
			height: 20px;

			span {
				height: 40px;
				line-height: 40px;
				background-color: #57b1db;
				padding-right: 20px;
			}

			i {
				font-size: 40px;
				height: 40px;
				background-color: #57b1db;
				padding-left: 20px;
			}
		}

		ul {
			margin: 100px 0;
			display: flex;
			justify-content: space-around;
			text-align: center;

			li {
				p {
					&:nth-child(2) {
						margin: 15px 0;
					}

					i {
						font-size: 40px;
					}

					&:nth-child(3) {
						font-size: 24px;
						font-weight: 700;
					}
				}
			}
		}

		.btn {
			text-align: center;
			width: 120px;
			height: 120px;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 60px;
			color: #57b1db;
			position: relative;
			padding-top: 25px;

			i {
				font-size: 40px;
			}

			.icon-RectangleCopy {
				position: absolute;
				right: -90px;
				top: 30px;
				color: #fff;
				border: 1px solid #fff;
				width: 60px;
				height: 60px;
				line-height: 60px;
				border-radius: 30px;
			}
		}

		.btnbox {
			display: flex;
			justify-content: space-evenly;
            display: none;

            div{
                width: 120px;
				height: 120px;
				text-align: center;
				background-color: #79f0c2;
				border-radius: 60px;
				padding-top: 25px;

                i {
                    font-size: 40px;
                }

                &:nth-child(2){
                    background-color: #ff6060;
                }
            }
		}
	}
}
